<template>
  <div class="mainNav" :style="{zIndex: 100, position: 'relative'}">
    <van-tabbar v-model="tabIndex" active-color="#5E8EFE">
      <van-tabbar-item v-for="(item,index) in tabList" :to="item.link" :key="index">
        <img slot="icon" slot-scope="props" :src="props.active?item.activeicon:item.icon" alt />
        <span>{{item.name}}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: ["clickToLogin"],
  data() {
    return {
      hot: false, //true则消息有红点提示
      userId: "", //用户id
      groups: [],
      tabList: [
        {
          name: "首页",
          icon: require("@/assets/img/tabBar/homePage.png"),
          activeicon: require("@/assets/img/tabBar/homePageHL.png"),
          link: "/login"
        },
        {
          name: "订单",
          icon: require("@/assets/img/tabBar/orderCenter.png"),
          activeicon: require("@/assets/img/tabBar/orderCenterHL.png"),
          link: "/login"
        },
        {
          name: "消息",
          icon: require("@/assets/img/tabBar/msgCenter.png"),
          activeicon: require("@/assets/img/tabBar/msgCenterHL.png"),
          link: "/login"
        },
        {
          name: "我的",
          icon: require("@/assets/img/tabBar/personalCenter.png"),
          activeicon: require("@/assets/img/tabBar/personalCenterHL.png"),
          link: "/login"
        }
      ],
      loginPath: "/login",
      tabIndex: 0
    };
  }
};
</script>
<style lang="scss" scoped>
</style>
